<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box {
      width: 300px;
      height: 300px;
      border: 10px solid #dddddd;
    }

    #child-box {
      width: 200px;
      height: 200px;
      background: #0a90cd;
      margin: 20px;
    }
  </style>
</head>
<body>
<div id="box">
  <div id="child-box">
    这是一个子盒子
  </div>
</div>
<script>
  var box = document.getElementById('box');
  box.addEventListener('click',function (ev) {
      console.log(ev);
      console.log('clientX/y',ev.clientX,ev.clientY)  // 当前点击的位置是相对于浏览器视口左上角的
      console.log('pageX/y',ev.pageX,ev.pageY) // 当前点击的位置是相对于整个网页（网页实际高度）左上角的
      console.log('screenX/y',ev.screenX,ev.screenY) // 当前点击的位置是相对于电脑屏幕左上角的
      console.log('offsetX/y',ev.offsetX,ev.offsetY) // 当前点击的位置是相对与event.target元素左上角的
      console.log('x/y',ev.x,ev.y) // 具有兼容性，在谷歌下与 clientX/Y 相同，最好不使用这个属性
  })
</script>
</body>
</html>
